<template>
  <el-dialog
    :visible="visible"
    :title="$t('command.A4.title')"
    width="60%"
    @close="handleClose"
  >
    <div class="container">
      <div class="blocks" style="width: 100%">
        <el-form
          @submit.prevent.native
          ref="lockTerminalForm"
          :model="dataForm"
          :rules="rules"
          label-width="120px"
        >
          <el-form-item :label="$t('common.expiration_time')+':'" prop="expireMinute">
            <el-input-number v-model="dataForm.expireMinute" controls-position="right" :min="5" :max="99999999" :placeholder="$t('common.expiration_time_tip')" :step="1" step-strictly class="w-6/12 mr-5" />
          </el-form-item>

          <el-form-item :label="$t('common.remark')+':'" prop="desc">
            <el-input
              v-model="dataForm.desc"
              maxlength="128"
              show-word-limit
              :placeholder="$t('common.remark')"
              @blur="() => dataForm.desc = dataForm.desc.trim()"
              :rows="5"
            />
          </el-form-item>
          <el-form-item :label="$t('common.hint_information')+':'" size="large" prop="hintInfo">
            <el-input
              v-model="dataForm.hintInfo"
              maxlength="200"
              show-word-limit
              type="textarea"
              :placeholder="$t('common.please_input')"
              @blur="() => dataForm.hintInfo = dataForm.hintInfo.trim()"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <template #footer>
    <span class="dialog-footer">
      <el-button size="small" @click="handleClose()">{{ $t('page.cancel') }}</el-button>
      <el-button size="small" type="primary" :loading="loading" @click="doOperation()">{{ $t('common.confirm') }}</el-button>
    </span>
  </template>
  </el-dialog>
</template>

<script>
import { addCmd } from '@/api/batch'
export default {
  props: {
    visible: Boolean
  },
  data() {
    return {
      batchId: '',
      dataForm: {
        desc: '',
        expireMinute: undefined,
        hintInfo: ''
      },
      rules: {

      },
      loading: false
    }
  },
  mounted() {
    this.batchId = this.$route.params.batchId
  },
  methods: {
    init(id) {
      this.batchId = id
    },
    handleClose() {
      this.$refs.lockTerminalForm.resetFields()
      this.$emit('close')
    },
    doOperation() {
      this.loading = true
      const params = {
        cmdTypeCode: 'A4',
        expireMinute: this.dataForm.expireMinute,
        // param1: '2021-11-03 10:49:53', // 传什么
        param2: this.dataForm.hintInfo,
        cmdDesc: this.dataForm.desc
      }
      addCmd(this.batchId, params).then(() => {
        this.$message({
          message: this.$t('batch.send_command_success'),
          type: 'success',
          onClose: () => {
            this.handleClose()
          }
        })
        this.loading = false
      }).catch(this.$confirmError)
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  height: 86px;
}
</style>
